Seo Onpage Blogspot – #4 Tối ưu HTML5 Cho Blogger

Chào các bạn, hôm nay tôi sẽ hướng dẫn các bạn cách tối ưu HTML5 cho blogger

KIỂM TRA CHUẨN HTML5 CHO WEBSITE

Trang website validator.w3.org sẽ giúp bạn kiểm tra cấu trúc HTML5 cho website/blog của bạn

1.CHỈNH SỮA PHẦN KHAI BÁO HTML CHO CHUẨN HTML 5

Các bạn kiểm tra đoạn code trên đầu blog có dạng như sau:

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!DOCTYPE html>
<html lang=’vi’ xml:lang=’vi’ xmlns=’http://www.w3.org/1999/xhtml’ xmlns:b=’http://www.google.com/2005/gml/b’ xmlns:data=’http://www.google.com/2005/gml/data’ xmlns:expr=’http://www.google.com/2005/gml/expr’>
<head>

Thay thế nó thành

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!DOCTYPE html>
<HTML lang=’vi’>
<head>

Tiếp theo bạn tìm thẻ </html> và thay nó thành </HTML>
Lưu ý : Nếu Các Bạn Lưu Lại Lỗi Thì Các Bạn Tới Phần <b:template-skin> … ]]></b:template-skin> rồi copy nội dung trong phần đó rồi di chuyển đoạn code trong đó tới <b:skin>
Rồi các bạn xóa đoạn <b:template-skin> … ]]></b:template-skin> rồi sẽ lưu lại được.

2.XÓA THANH NAVAR ĐỂ CHUẨN HTML 5

Bạn tìm đến thẻ <body> và thêm đoạn code sau vào trước nó:

<!–<body>–>

Tiếp theo bạn thay đoạn </body> thành:

<!–</body>–></body>

3.XÓA ĐOẠN CODE CHỈNH SỮA BÀI VIẾT VÀ CHỈNH SỮA WIDGETS ĐỂ CHUẨN HTML 5

Bạn tìm 2 đoạn code sau và xóa nó đi rồi lưu lại nhé

<b:include data=’post’ name=’postQuickEdit’/>

và

<b:include name=’quickedit’/>

4. SỬA LỖI LIÊN QUAN TỚI ẢNH

Lỗi này liên quan đến hình ảnh thiếu khai báo thuộc tính alt=”mô tả ảnh” bạn chỉ cần thêm thuộc tính alt vào sau thẻ mở ảnh <img alt=”mô tả ảnh” src=”url_ảnh”……../>
Lỗi này thường rất nhiều bạn hãy thêm thuộc tính alt vào hết trong ảnh nhé

5.SỬA LỖI HTML5 TẠI LOGO

Khi blog của bạn sử dụng Logo và check với công cụ kiểm tra HTML5 bạn sẽ thấy phát hiện lỗi HTML5 tại logo và đây là cách khắc phục để đạt chuẩn HTML5 tại logo
Bạn tìm đoạn code sau:

<img expr:alt=’data:title’ expr:height=’data:height’ expr:id=’data:widget.instanceId + "_headerimg"’ expr:src=’data:sourceUrl’ expr:width=’data:width’ style=’display: block’/>

Và thay thế bằng

<b:if cond=”data:blog.pageType == "index"”>
<h1 itemprop=”name”>
<a expr:href=”data:blog.homepageUrl” href=”https://www.blogger.com/null” itemprop=”url”>
<img expr:alt=”data:title” expr:id=”data:widget.instanceId + "_headerimg"” expr:src=”data:sourceUrl” expr:style=”"height:" + data:height + "width:" + data:width + "display: block"” /><span style=”display: none;”><data:blog .title=””></data:blog></span></a></h1>
<b:else>
<h3 itemprop=”name”>
<a expr:href=”data:blog.homepageUrl” href=”https://www.blogger.com/null” itemprop=”url”>
<img expr:alt=”data:title” expr:id=”data:widget.instanceId + "_headerimg"” expr:src=”data:sourceUrl” expr:style=”"height:" + data:height + "width:" + data:width + "display: block"” /><span style=”display: none;”><data:blog .title=””></data:blog></span></a></h3>
</b:else>
</b:if>

Đoạn code thay thế mình đã sử dụng điều kiện nếu là ở trang chủ thì tên Blog sẽ khai báo là thẻ H1 và vào bài viết thì tên Blog sẽ chuyển thành thẻ H3. Nên các bạn cố gắng tìm các thẻ<b:if> …. </b:if> bao đoạn code tô đỏ để thay thế toàn diện.

6. FIX LỖI HTML5 PHIÊN BẢN VERSION2

Đối với các template sử dụng version 2 bạn sẽ luôn thấy đoạn code sau:

<html b:version=’2′ class=’v2′ lang=’vi’ xmlns=’http://www.w3.org/1999/xhtml’ xmlns:b=’http://www.google.com/2005/gml/b’ xmlns:data=’http://www.google.com/2005/gml/data’ xmlns:expr=’http://www.google.com/2005/gml/expr’>

Khi kiểm tra HTML5 bạn sẽ thấy 7 – 8 lỗi từ đoạn code này vì vậy cách sửa là bạn xóa và giữ lại đoạn code sau:

<html b:version=’2′ class=’v2′ lang=’vi’>

Lưu ý: mỗi lần truy cập vào mẫu đoạn code đầu lại xuất hiện, do đó bạn phải luôn xóa nó đi mỗi lần lưu template lại.

LỜI KẾT

Các lỗi thông thường khác công cụ đã báo cho các bạn chỉ cần tinh ý đọc được đề xuất bằng tiếng anh của nó bạn sẽ sửa lỗi nó dễ dàng, hoặc các bạn có thể dùng công cụ dịch toàn bộ trang để đọc và tìm cách khắc phục những lỗi liên quan nhé.
Nếu các bạn có vướng mắc hãy để lại bình luận phía dưới mình sẽ hỗ trợ.